<template>
	<view class="wrap">
		<image class="img" mode="aspectFit" :src="upSrc"></image>
		<view class="middle" :class="shake?'animate':'hide'">
			<template v-show="shake">
				<image class="loading_img" mode="aspectFit" :src="loadingSrc"></image>
				<text>正在寻找同一时刻摇手机的人</text>
			</template>
		</view>
		<image class="img" mode="aspectFit" :src="downSrc"></image>
		<view class="card" v-show="remark">
      <image class="card_img" mode="aspectFit" src="/static/img/head.png"></image>
			<view>
				<view class="title">摇摇</view>
				<view class="dis">相距1259公里</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upSrc: "https://img-blog.csdnimg.cn/20190715203127151.png",
				downSrc: "https://img-blog.csdnimg.cn/20190715203120883.png",
				loadingSrc: "https://img-qn-2.51miz.com/preview/element/00/01/25/88/E-1258822-95D080EB.gif",
				audioID: null,
				record: "/static/5018.wav",
				endRecord:"/static/5012.wav",
				wid: null,
				frequency: 2000,
				shake: false,
				remark:false
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// 初始化音频对象
			this.initAudio()
			// 监听设备加速度变化信息
			this.watchAcceleration()
			// #endif
		},
		methods: {
			initAudio() {
				if (plus.audio == undefined) {
					this.moduleAlert("音频设备没有准备好😯")
				};
				// 创建音频播放器对象，不同系统，支持的音频格式有区别
				this.audioID = plus.audio.createPlayer(this.record,{volume:0.8});
				// 听筒线路
				this.audioID.setRoute( plus.audio.ROUTE_EARPIECE );
			},
			watchAcceleration() {
				// 监听设备加速度变化信息
				this.wid = plus.accelerometer.watchAcceleration((e) => {
					Object.keys(e).forEach(key => {
						this[key] = e[key];
						console.log(this[key],key)
					})
					
					const conditon = Math.abs(this.xAxis) > 15 | Math.abs(this.yAxis) > 15 | Math.abs(this.zAxis) >
						15;
					if (conditon) {
						console.log(222)
						// this.audioID.stop();
						// 获取音频播放状态
						const status = this.audioID.isPaused();
						if(status){
							// 符合条件播放音乐
							this.audioID.play();
						}
						if(this.shake) {
							return 
						}
						this.shake = true;
						this.remark = false;
						setTimeout(() => {
							// 假设找到
							this.shake = false;
							this.remark = true;
							this.endAudio()
						}, 8000)
					}
				}, (error) => {
					const {
						code,
						message
					} = error;
					this.moduleAlert(message)
				}, {
					frequency: this.frequency
				})
			},
			moduleAlert(msg) {
				plus.nativeUI.alert(msg)
			},
			endAudio(){
				if (plus.audio == undefined) {
					this.moduleAlert("音频设备没有准备好😯")
				};
				// 创建音频播放器对象，不同系统，支持的音频格式有区别
				console.log(666)
				let endaudioID = plus.audio.createPlayer(this.endRecord,{volume:0.8});
				// 听筒线路
				endaudioID.setRoute( plus.audio.ROUTE_EARPIECE );
				endaudioID.play()
			}
		}
	}
</script>

<style>
	page {
		background: #000000;
	}
</style>
<style scoped>
	.wrap {
		position: relative;
		width: 100%;
		background: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		min-height: 100vh;
	}

	.img {
		width: 460rpx;
		height: 260rpx;
		vertical-align: bottom;
	}

	.loading_img {
		width: 460rpx;
		height: 260rpx;
		margin-bottom: 24rpx;
	}

	.middle {
		width: 100%;
		height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #444040;
		color: #fff;
		transition: all 2s ease;
	}

	.animate {
		padding: 30rpx;
		height: 300rpx;
	}

	.hide {
		transition: all 0.5s ease;
	}

	text {
		font-size: 12px;
	}

	.card {
		width:500rpx;
		background: #4C4C4C;
		display: flex;
		align-items: center;
		padding:24rpx;
		border-radius: 8rpx;
	}
	.card_img{
		width:80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	.title{
		font-size: 28rpx;
		color: #fff;
	}
	.dis{
		font-size: 24rpx;
		color: #9f9d9d;
	}
</style>
